<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>

<body>
    <!-- 按钮 -->
    <!-- <input type="button" value="重新开始一局游戏"> -->
    <button id="reset">重新开始一局游戏</button><br />
    请输入要猜的数字：<input type="text" name="guestNum" id="guestNum"><button id="guest">猜</button><br>
    已经猜的次数：<span id="count"></span><br>
    结果：<span id="result"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script>
        //生成随机数
        let num = Math.floor(Math.random() * 100) + 1;//向下取整 1-100
        console.log(num);
        let count = 0;

        $("#guest").click(function () {
            //取到 输入框的值 赋值给 guestNum
            let guestNumber = $("#guestNum").val();

            //每次取到输入框的值  count++
            count++;

            //需要将count 写在   已经猜的次数：  的后面
            $("#count").text(count);

            if (num < guestNumber) {
                //猜大了
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            } else if (num > guestNumber) {
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            } else {
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }

        });

        //重新开一局游戏
        $("#reset").click(function () {
            num = Math.floor(Math.random() * 100) + 1;
            console.log(num);
            count = 0;
            $("#guestNum").text("");
            $("#count").text(count);
            $("#result").text("");
        })
    </script>
</body>

</html>